<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title translate="yes">Graphs</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="graphs.css" rel="stylesheet">
        <script src="../base1/jquery.js"></script>
        <script src="../base1/cockpit.js"></script>
        <script src="../manifests.js"></script>
        <script type="text/javascript" src="graphs.js"></script>
        <script src="../*/po.js"></script>
    </head>

    <body class="pf-m-redhat-font pf-c-page">
        <main role="main" class="pf-c-page__main" tabindex="-1">
            <div id="simple_graphs">
                <header>
                    <section class="pf-c-page__main-breadcrumb pf-m-light pf-c-page__main-section">
                        <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
                            <ol class="pf-c-breadcrumb__list">
                                <li class="pf-c-breadcrumb__item">
                                    <a role="link" tabindex="0" translate='yes' class="pf-c-breadcrumb__link system-link">Overview</a>
                                </li>
                                <li class="pf-c-breadcrumb__item">
                                    <span class="pf-c-breadcrumb__item-divider">
                                        <i class="fa fa-angle-right" aria-hidden="true"></i>
                                    </span>
                                    <a translate='yes' href="#" class="pf-c-breadcrumb__link pf-m-current" aria-current="page">Usage graphs</a>
                                </li>
                            </ol>
                        </nav>
                    </section>

                    <section class="pf-c-page__main-section pf-m-light ct-page_main-toolbar">
                        <div class="pf-c-content">
                            <div data-pf-content="true" id="server-graph-toolbar" class="pf-c-toolbar server-graph-toolbar zoom-controls standard-zoom-controls">
                                <div class="dropdown">
                                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        <span></span>
                                        <i class="fa fa-caret-down pf-c-context-selector__toggle-icon" aria-hidden="true"></i>
                                    </button>
                                    <ul class="dropdown-menu" role="menu">
                                        <li role="presentation"><a role="link" tabindex="0" role="menuitem" data-action="goto-now" translate>Go to now</a></li>
                                        <li role="presentation" class="divider"></li>
                                        <li role="presentation"><a role="link" tabindex="0" role="menuitem" data-range="300" translate>5 minutes</a>
                                        </li>
                                        <li role="presentation"><a role="link" tabindex="0" role="menuitem" data-range="3600" translate>1 hour</a>
                                        </li>
                                        <li role="presentation"><a role="link" tabindex="0" role="menuitem" data-range="21600" translate>6 hours</a>
                                        </li>
                                        <li role="presentation"><a role="link" tabindex="0" role="menuitem" data-range="86400" translate>1 day</a>
                                        </li>
                                        <li role="presentation"><a role="link" tabindex="0" role="menuitem" data-range="604800" translate>1 week</a>
                                        </li>
                                    </ul>
                                </div>
                                <button class="pf-c-button pf-m-secondary" data-action="zoom-out">
                                    <span class="glyphicon glyphicon-zoom-out"></span>
                                </button>
                                <div class="btn-group">
                                    <button class="pf-c-button pf-m-secondary" data-action="scroll-left"><span class="fa fa-angle-left"/></button>
                                    <button class="pf-c-button pf-m-secondary" data-action="scroll-right"><span class="fa fa-angle-right"/></button>
                                </div>
                            </div>
                        </div>
                    </section>
                </header>

                <section class="pf-c-page__main-section">
                    <div class="ct-graphs-layout pf-l-gallery pf-m-gutter">
                        <div class="pf-c-card ct-graph-cpu ct-graph-simple">
                            <a tabindex="0" id="link-cpu"></a>
                            <span class="plot-unit" id="server_cpu_unit">%</span>
                            <div id="server_cpu_graph" class="server-graph zoomable-plot"></div>
                        </div>

                        <div class="pf-c-card ct-graph-memory ct-graph-simple">
                            <a tabindex="0" id="link-memory" translate>Memory</a>
                            <a tabindex="0" id="link-memory-and-swap" hidden translate>Memory & swap</a>
                            <span class="plot-unit" id="server_memory_unit"></span>
                            <div id="server_memory_graph" class="server-graph zoomable-plot"></div>
                        </div>

                        <div class="pf-c-card ct-graph-io ct-graph-simple">
                            <span id="link-disk"></span>
                            <span class="plot-unit" id="server_disk_io_unit"></span>
                            <div id="server_disk_io_graph" class="server-graph zoomable-plot"></div>
                        </div>

                        <div class="pf-c-card ct-graph-network ct-graph-simple">
                            <span id="link-network"></span>
                            <span class="plot-unit" id="server_network_traffic_unit"></span>
                            <div id="server_network_traffic_graph" class="server-graph zoomable-plot"></div>
                        </div>
                    </div>
                </section>
            </div>

            <div id="complicated_graphs">
                <header>
                    <section class="pf-c-page__main-breadcrumb pf-m-light pf-c-page__main-section">
                        <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
                            <ol class="pf-c-breadcrumb__list">
                                <li class="pf-c-breadcrumb__item">
                                    <a role="link" tabindex="0" translate='yes' class="pf-c-breadcrumb__link system-link">Overview</a>
                               </li>
                                <li class="pf-c-breadcrumb__item">
                                    <span class="pf-c-breadcrumb__item-divider">
                                        <i class="fa fa-angle-right" aria-hidden="true"></i>
                                    </span>
                                    <a role="link" tabindex="0" translate='yes' class="pf-c-breadcrumb__link graphs-link">Usage graphs</a>
                                </li>
                                <li class="pf-c-breadcrumb__item">
                                    <span class="pf-c-breadcrumb__item-divider">
                                        <i class="fa fa-angle-right" aria-hidden="true"></i>
                                    </span>
                                    <a translate='yes' href="#" class="pf-c-breadcrumb__link pf-m-current" id="complicated_graph_current_breadcrumb" aria-current="page"></a>
                                </li>
                            </ol>
                        </nav>
                    </section>
                </header>

                <section class="pf-c-page__main-section">
                    <div class="ct-graphs-layout pf-l-gallery pf-m-gutter">
                        <div class="server-graph-container pf-c-card" id="cpu_status" hidden>
                            <div class="server-graph-title" id="cpu_status_title">&nbsp;</div>
                            <ul class="server-graph-legend">
                                <li class="cpu-nice">
                                    <i class="fa fa-square"></i>
                                    <span translate="yes">Nice</span>
                                </li>
                                <li class="cpu-user">
                                    <i class="fa fa-square"></i>
                                    <span translate="yes">User</span>
                                </li>
                                <li class="cpu-kernel">
                                    <i class="fa fa-square"></i>
                                    <span translate="yes">Kernel</span>
                                </li>
                                <li class="cpu-io-wait">
                                    <i class="fa fa-square"></i>
                                    <span translate="yes">I/O wait</span>
                                </li>
                            </ul>
                            <div class="server-graph server-graph-graph" id="cpu_status_graph"></div>
                        </div>

                        <div class="server-graph-container pf-c-card" id="memory_status" hidden>
                            <div class="server-graph-title" id="memory_status_title">&nbsp;</div>
                            <ul class="server-graph-legend">
                                <li class="memory-swap">
                                    <i class="fa fa-square"></i>
                                    <span translate="yes">Swap used</span>
                                </li>
                                <li class="memory-cached">
                                    <i class="fa fa-square"></i>
                                    <span translate="yes">Cached</span>
                                </li>
                                <li class="memory-used">
                                    <i class="fa fa-square"></i>
                                    <span translate="yes">Used</span>
                                </li>
                            </ul>
                            <div class="server-graph server-graph-graph" id="memory_status_graph"></div>
                        </div>
                    </div>
                </section>
            </div>
        </main>
    </body>
</html>
